.page-sd {
  background-color: #282c34;

  .inner {
    display: flex;

    .sd-box {
      margin 10px
      background-color #262626
      border 1px solid #454545
      min-width 300px
      max-width 300px
      padding 10px
      border-radius 10px
      color #ffffff;
      font-size 14px

      h2 {
        font-weight: bold;
        font-size 20px
        text-align center
        color #47fff1
      }

      // 隐藏滚动条

      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }

      .sd-params {
        margin-top 10px
        overflow auto


        .param-line {
          padding 0 10px

          .el-icon {
            position relative
            top 3px
          }

          .el-input__suffix-inner {
            .el-icon {
              top 0
            }
          }

          .grid-content
          .form-item-inner {
            display flex

            .el-icon {
              margin-left 10px
              margin-top 2px
            }
          }

        }

        .param-line.pt {
          padding-top 5px
          padding-bottom 5px
        }
      }

      .submit-btn {
        padding 10px 15px 0 15px
        text-align center

        .el-button {
          width 100%

          span {
            color #2D3A4B
          }
        }
      }
    }

    .el-form {
      .el-form-item__label {
        color #ffffff
      }
    }

    .task-list-box {
      width 100%
      padding 10px
      color #ffffff
      overflow-x hidden

      .running-job-list {
        .job-item {
          //border: 1px solid #454545;
          width: 100%;
          padding 2px
          background-color #555555

          .job-item-inner {
            position relative
            height 100%
            overflow hidden

            .progress {
              position absolute
              width 100%
              height 100%
              top 0
              left 0
              display flex
              justify-content center
              align-items center

              span {
                font-size 20px
                color #ffffff
              }
            }
          }
        }
      }


      .finish-job-list {
        .job-item {
          width 100%
          height 100%

          .opt {
            .opt-line {
              margin 6px 0

              ul {
                display flex
                flex-flow row

                li {
                  margin-right 10px

                  a {
                    padding 3px 0
                    width 44px
                    text-align center
                    border-radius 5px
                    display block
                    cursor pointer
                    background-color #4E5058
                    color #ffffff

                    &:hover {
                      background-color #6D6F78
                    }
                  }
                }

                .show-prompt {
                  font-size 20px
                  cursor pointer
                }
              }
            }
          }

        }

      }

      .el-image {
        width 100%
        height 100%
        max-height 240px

        img {
          height 240px
        }

        .el-image-viewer__wrapper {
          img {
            width auto
            height auto
          }
        }

        .image-slot {
          display flex
          flex-flow column
          justify-content center
          align-items center
          height 100%
          min-height 200px
          color #ffffff

          .iconfont {
            font-size 50px
            margin-bottom 10px
          }
        }
      }

      .el-image.upscale {
        max-height 304px

        img {
          height 304px
        }

        .el-image-viewer__wrapper {
          img {
            width auto
            height auto
          }
        }
      }
    }
  }

  .el-overlay-dialog {
    .el-dialog {
      background-color #1a1b1e

      .el-dialog__header {
        .el-dialog__title {
          color #F5F5F5
        }
      }

      .el-dialog__body {
        padding 0 0 0 15px !important
        display flex
        height 100%

        .el-row {
          width 100%

          .img-container {
            display flex
            justify-content center
          }

          .task-info {
            background-color #25262b
            padding 1rem 1.5rem

            .info-line {
              width 100%

              .prompt {
                background-color #35363b
                padding 10px
                color #999999
                overflow auto
                max-height 100px
                min-height 50px

                position relative

                .el-icon {
                  position absolute
                  right 10px
                  bottom 10px
                  cursor pointer
                }
              }

              .wrapper {
                margin-top 10px
                display flex

                label {
                  display flex
                  width 100px
                  color #a5a5a5
                }

                .item-value {
                  display flex
                  width 100%
                  background-color #35363b
                  padding 2px 5px
                  border-radius 5px
                  color #F5F5F5
                }
              }

            }

            .copy-params {
              padding 20px 0 10px 0

              .el-button {
                width 100%
              }
            }
          }
        }

        // end el-row

      }
    }
  }

  .mj-list-item-prompt {
    .el-icon {
      margin-left 10px
      cursor pointer
      position relative
      top 2px
    }
  }

}

.custom-scroll {
  /* 修改滚动条的颜色 */

  ::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
  }

  /* 修改滚动条轨道的背景颜色 */

  ::-webkit-scrollbar-track {
    background-color: #282C34;
  }

  /* 修改滚动条的滑块颜色 */

  ::-webkit-scrollbar-thumb {
    background-color: #444444;
    border-radius 10px
  }

  /* 修改滚动条的滑块的悬停颜色 */

  ::-webkit-scrollbar-thumb:hover {
    background-color: #666666;
  }
}

